<template>
  <div class="keyVideo">
    <div class="title">
      <stitle :bg="bg" text="罐区安控实时监测数据" :type="0"/>
    </div>
    <div class="tableList">
      <div class="tablecon">
        <el-table :data="potdata" style="width: 100%">
          <el-table-column prop="type" label="类型" width="80px">
          </el-table-column>
          <el-table-column prop="point" label="名称点" width="100px">
          </el-table-column>
          <el-table-column prop="model" label="型号" width="60px">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="60px">
            <template slot-scope="scope">
              <span :class="`${getState(scope.row.state).cls}`">{{
                getState(scope.row.state).text
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="index" label="编号"> </el-table-column>
          <el-table-column prop="value" label="监测值"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
import store from "@/utils/store";
export default {
  name: "keyVideo",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      state: store.state,
      potdata: [
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 1,
          index: "#001",
          value: "4.5米",
        },
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 0,
          index: "#001",
          value: "4.5米",
        },
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 1,
          index: "#001",
          value: "4.5米",
        },
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 1,
          index: "#001",
          value: "4.5米",
        },
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 1,
          index: "#001",
          value: "4.5米",
        },
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 1,
          index: "#001",
          value: "4.5米",
        },
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 1,
          index: "#001",
          value: "4.5米",
        },
        {
          type: "一号罐区",
          point: "压力测试点2",
          model: "型号A",
          state: 1,
          index: "#001",
          value: "4.5米",
        },
      ],
    };
  },
  mounted() {},
  computed: {
    getState() {
      return function (param) {
        return param === 1
          ? { text: "正常", cls: "normal" }
          : { text: "故障", cls: "fault" };
      };
    },
  },
};
</script>


<style lang="scss"  scoped>
.keyVideo {
  width: 450px;
  height: 225px;
  position: absolute;
  left: 450px;
  top: 790px;
  overflow: hidden;
  box-sizing: border-box;
  .tableList {
    .tablecon >>>.el-table__body-wrapper {
        overflow: auto;
        height: 150px;
      }
    
  }
  .title {
    width: 90%;
    float: left;
  }
  .videofunc {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("~@/assets/images/DispatchCommand/videofunc.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 4px;
    cursor: pointer;
  }
  .normal {
    padding: 2px;
    box-sizing: border-box;
    background: rgba(0, 104, 193, 0.33);
    border: 1px solid #117ad3;
    border-radius: 2px;
    color: #09a0ff;
    font-size: 12px;
  }
  .fault {
    padding: 2px;
    box-sizing: border-box;
    background: rgba(136, 0, 0, 0.33);
    border: 1px solid #db1414;
    border-radius: 2px;
    color: #db1414;
    font-size: 12px;
  }
}
</style>